<script setup lang="ts">
import Littlek from "../LittleK/index.vue";
import { URL_TOKEN_DETAIL } from "@/comm/api";
import { get } from "@/comm/request";
import { useTokens } from "@/stores/tokens";
import { ref, reactive, onMounted, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { Bus, DAY_STATE } from "@/connetion/Bus";
import { formatBigNumber, numberWithComma, numberWithCommas, scientificToDecimal } from "@/comm/format";
import { getKlineDayLimit, getKlineNowLimit } from "@/components/chart/core/tooler";
import XDecimals from "@/components/x-decimals/index.vue";

const props = defineProps({
    kline: {
        type: Array,
        default: () => []
    },
    kType: {
        type: String,
        default: "H"
    }
});

const Dkline = ref<any[]>([]);
const route = useRoute();
const tokens = useTokens();
const coin = ref<any>({
    price: 0
});
const getImg = computed(() => {
    console.log("coin.value", coin.value)
    if (coin.value) {
        return tokens.getImg(coin.value.symbol);
        // return coin.url;
    }
    return tokens.getImg("");
});
watch(
    () => props.kline,
    newVal => {
        if (props.kline.length > 0) {
            const last = props.kline[props.kline.length - 1];
            console.log('last', last)
            const coinPrice = scientificToDecimal((last as any)?.close)
            console.log('最后一根k价格', coinPrice, 0)
            if (!coin.value.price || coin.value.price == 0) {
                coin.value.price = coinPrice
                console.log('获取币对价格！！！！！！！！！！！！！！！！！', coin.value.price)
            }
            if (props.kType == 'H') {
                Dkline.value = props.kline;
            }
        }
    }
);
//当前涨幅公式 （当前收盘价格  - 昨天开盘价格）/ 昨天开盘价格 * 100
const coinNow = computed(() => {
    if (Dkline.value.length > 0) {
        const percentage = getKlineNowLimit(Dkline.value);
        return percentage;
    }
    return 0;
});
// 7天涨跌幅
const coinD7 = computed(() => {
    if (Dkline.value.length > 0) {
        const percentage = getKlineDayLimit(Dkline.value, 7);
        return percentage;
    }
    return 0;
});
//30天涨幅
const coinD30 = computed(() => {
    if (Dkline.value.length > 0) {
        const percentage = getKlineDayLimit(Dkline.value, 30);
        return percentage;
    }
    return 0;
});
/* 市值 = 总供应量 * 当前价格 */
const MarketValue = computed(() => {
    // return multiplication(coin.value?.price, coin.value?.totalSupply)
    let market: number | string
    console.log(`
    总供应量：${coin.value?.totalSupply}
    单价：${coin.value?.price}
    `)
    market = 0
    if (coin.value?.totalSupply && coin.value?.price) {
        let supply = String(coin.value?.totalSupply)
        //如果是科学计数法
        if (supply.indexOf('e') > -1) {
            let numSupply = scientificToDecimal(supply)
            let bigNum = coin.value?.price * +numSupply
            market = scientificToDecimal(bigNum)
        } else {
            market = coin.value?.price * Number(supply)
        }
    }
    return numberWithCommas(market)
});
onMounted(async () => {
    getToKenDetail();
});
async function getToKenDetail() {
    let res: any = await get(URL_TOKEN_DETAIL.replace("@", route.params.id + ""));
    const coinPrice = (props.kline[props.kline.length - 1] as any)?.close || 0;
    coin.value = res.data;
    console.log("token头部信息 ===================>", coin.value);
    if (!coin.value?.symbol) {
        coin.value.symbol = res.data?.name || ''
    }
    coin.value.price = scientificToDecimal(coinPrice);
}
function openWeb(url?: string) {
    if (url) {
        window.open(url);
    }
}
</script>

<template>
    <div class="coin-details">
        <div class="c-nav c-title-3"><img class="c-img" :src="getImg" />{{ coin?.symbol || '--'
        }}
        </div>
        <div class="c-items">
            <div class="c-item">
                <div class="b-box">
                    <!-- 币种余额 -->
                    <div class="b-head">
                        <p class="c-title-4" style="color: var(--color)">Price</p>
                        <div class="b-head-right">
                            <span class="c-item-title1" v-if="coin?.price == 0 || !coin.price">--</span>
                            <XDecimals class="c-item-title1" v-else :num="coin.price" prefix="$"></XDecimals>
                            <!-- 涨幅百分比 -->
                            <span class="c-item-title2" :style="{ color: `var(${+coinNow < 0 ? '--lose' : '--win'})` }">
                                {{ `${+coinNow != 0 ? `${Math.abs(+coinNow)}%` : "-"}` }}
                            </span>
                            <!-- <span class="iconfont icon-arrow_down up"></span> -->
                            <span v-if="+coinNow != 0"
                                :class="['iconfont', 'icon-arrow_down', +coinNow < 0 ? 'low' : 'up']"></span>
                        </div>
                    </div>
                    <Littlek :percentage="+coinNow" :kline="Dkline"></Littlek>
                </div>
            </div>
            <div class="c-item">
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 7d -->
                        {{ $t("message.Token.CoinState.table.c") }}
                    </span>
                    <span class="c-title-4" :style="{ color: `var(${+coinD7 < 0 ? '--lose' : '--win'})` }">
                        {{ `${+coinD7 > 0 ? `+${Math.abs(+coinD7)}%` : `${coinD7}%`}` }}
                    </span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 30d -->
                        {{ $t("message.Token.CoinState.table.b") }}
                    </span>
                    <span class="c-title-4" :style="{ color: `var(${+coinD30 < 0 ? '--lose' : '--win'})` }">
                        {{ `${+coinD30 > 0 ? `+${Math.abs(+coinD30)}%` : `${coinD30}%`}` }}
                    </span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 历史最高 -->
                        {{ $t("message.Token.CoinState.table.e") }}
                    </span>
                    <span class="c-title-4">{{ `${coin?.allTimeHighPriceUsd > 0 ?
                        `$${numberWithCommas(coin?.allTimeHighPriceUsd, 7)}` : "-"}` }}</span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 历史最低 -->
                        {{ $t("message.Token.CoinState.table.f") }}
                    </span>
                    <span class="c-title-4">
                        {{ `${coin?.allTimeLowPriceUsd > 0 ? `$${numberWithCommas(coin?.allTimeLowPriceUsd, 7)}` : "-"}` }}
                    </span>
                </div>
            </div>

            <div class="c-item">
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 市值 总供应量*当前价格 -->
                        {{ $t("message.Token.CoinState.tableB.a") }}
                    </span>
                    <span class="c-title-4">
                        {{ `${coin?.marketCap > 0 ? `$${numberWithCommas(coin?.marketCap)}` : `$${MarketValue}`}` }}
                    </span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 流通量 -->
                        {{ $t("message.Token.CoinState.tableB.b") }}
                    </span>
                    <span class="c-title-4">{{ `${coin?.maxSupply ? numberWithCommas(coin?.maxSupply) :
                        "-"}` }}</span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 总供应量 -->
                        {{ $t("message.Token.CoinState.tableB.c") }}
                    </span>
                    <span class="c-title-4">{{ `${coin?.totalSupply ?
                        numberWithCommas(scientificToDecimal(coin?.totalSupply)) : "-"}` }}</span>
                </div>
                <div class="two-it">
                    <span class="t-label c-title-4">
                        <!-- 官网 -->
                        {{ $t("message.Token.CoinState.tableC.d") }}
                    </span>
                    <span class="long-t c-title-4" @click="openWeb(coin?.website)">{{ coin?.website || "-" }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
